/** * 组件-侧栏 * **/
<template>
  <el-aside
    :class="
      'layout-aside-' +
      config.layout.layoutMode +
      ' ' +
      (config.layout.shrink ? 'shrink' : '')
    "
  >
    <logo v-if="config.layout.menuShowTopBar" />
    <menus />
  </el-aside>
</template>

<script setup lang="ts">
import Logo from "./Logo.vue";
import Menus from "./Menu.vue";
import { useConfig } from "../stores/config";

const config = useConfig();
const menuWidth = computed(() => config.menuWidth());
console.log('menuWidth=====', menuWidth)
</script>
<style lang="less">
.layout-aside-Default {
  margin: 0.16rem 0 0.16rem 0.16rem;
  height: calc(10.8rem - 0.32rem);
  box-shadow: 0 0 0.12rem rgba(0, 0, 0, 0.12);
  border-radius: 0.04rem;
  overflow: hidden;
  transition: width 0.3s ease;
  width: v-bind(menuWidth);
}

.layout-aside-Classic {
  height: 10.8rem;
  overflow: hidden;
  transition: width 0.3s ease;
  width: v-bind(menuWidth);
  box-shadow: 0 0 0.12rem rgba(0, 0, 0, 0.12);
  border-radius: 0.04rem;
}

// 小屏设备样式
.shrink {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
}
</style>
